h4 &lt;hr&gt;

hr

h4 List

ul
  li foo
    ul
      li sub foo
      li sub bar
      li sub baz
  li bar
  li baz

h4 Blockquote

blockquote Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quis cumque similique voluptas facilis fugit inventore odit, quidem et ab, quos, blanditiis iure! Ipsum nostrum corrupti architecto fugit, culpa expedita.


h4 Form

form.form
  fieldset.form-group
    label(for="username") USERNAME:
    input.form-control#username(type="text" placeholder="type your name...")

  fieldset.form-group
    label(for="email") EMAIL:
    input.form-control#email(type="email" placeholder="")

  fieldset.form-group
    label(for="country") COUNTRY:
    select.form-control#country
      option China
      option U.S.
      option U.K.
      option Japan

  fieldset.form-group.form-textarea
    label(for="message") MESSAGE:
    textarea.form-control#message(rows="5") Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam placeat ratione nisi assumenda quo saepe quasi iste temporibus asperiores. Soluta cupiditate quam at reprehenderit facere. Asperiores nulla rerum earum pariatur.

  .form-actions
    button.btn.btn-primary.btn-block(type="button") Submit

:marked
  ```html
  <form class="form">
    <fieldset class="form-group">
      <label for="username">USERNAME:</label>
      <input id="username" type="text" placeholder="type your name..." class="form-control">
    </fieldset>
    <fieldset class="form-group">
      <label for="email">EMAIL:</label>
      <input id="email" type="email" placeholder="" class="form-control">
    </fieldset>
    <fieldset class="form-group">
      <label for="country">COUNTRY:</label>
      <select id="country" class="form-control">
        <option>China</option>
        <option>U.S.</option>
        <option>U.K.</option>
        <option>Japan</option>
      </select>
    </fieldset>
    <fieldset class="form-group form-textarea">
      <label for="message">MESSAGE:</label>
      <textarea id="message" rows="5" class="form-control"></textarea>
    </fieldset>
    <div class="form-actions">
      <button type="button" class="btn btn-primary btn-block">Submit</button>
    </div>
  </form>
  ```

h5 Stateful Form

form.form
  fieldset.form-group.form-success
    label(for="username2") USERNAME:
    input.form-control#username2(type="text" placeholder="type your name...")

  fieldset.form-group.form-warning
    label(for="age") AGE:
    input.form-control#age(type="text" placeholder="")

:marked
  ```html
  .form-group.form-success
  .form-group.form-error
  .form-group.form-warning
  ```

h5 Help Block

form.form
  fieldset.form-group.form-success
    label(for="phone") Phone Number:
    input.form-control#phone(type="text" value="+86 180 800 8000" placeholder="")
    .help-block In this format: +86 xxx xxx xxxxx

  fieldset.form-group.form-error
    label(for="email3") EMAIL:
    input.form-control#email3(type="email" placeholder="")

:marked
  ```html
  <fieldset class="form-group form-success">
    <label for="phone">Phone Number:</label>
    <input id="phone" type="text" placeholder="" class="form-control">
    <div class="help-block">In this format: +86 xxx xxx xxxxx</div>
  </fieldset>
  ```

h4 Table

:marked
  |editor|speed|extension|interface|
  |---|---|---|---|
  |sublime|90|80|70|
  |atom|60|85|80|
  |vscode|80|65|60|

h4 Progress bar

.progress-bar.progress-bar-show-percent
  .progress-bar-filled(style="width:40%;" data-filled="Loading 40%")


:marked
  ```html
  <!-- with only an arrow -->
  <div class="progress-bar">
    <div class="progress-bar-filled" style="width: 40%"></div>
  </div>

  <!-- with a percentage showing above the arrow -->
  <div class="progress-bar progress-bar-show-percent">
    <div class="progress-bar-filled" style="width: 40%" data-filled="Loading 40%"></div>
  </div>
  ```

h4 Buttons

.example
  button.btn.btn-default Default
  button.btn.btn-primary Primary
  button.btn.btn-success Success
  button.btn.btn-info Info
  button.btn.btn-warning Warning
  button.btn.btn-error Error

.example
  button.btn.btn-default.btn-ghost Default Ghost
  button.btn.btn-primary.btn-ghost Primary Ghost
  button.btn.btn-success.btn-ghost Success Ghost
  button.btn.btn-info.btn-ghost Info Ghost
  button.btn.btn-warning.btn-ghost Warning Ghost
  button.btn.btn-error.btn-ghost Error Ghost

.example
  button.btn.btn-primary.btn-block.btn-ghost Block Level Button

:marked
  ```html
  <button class="btn btn-default">Default</button>
  <button class="btn btn-primary">Primary</button>
  <button class="btn btn-success">Success</button>
  <button class="btn btn-info">Info</button>
  <button class="btn btn-warning">Warning</button>
  <button class="btn btn-error">Error</button>

  <button class="btn btn-primary btn-ghost">Ghost Button</button>

  <button class="btn btn-primary btn-block">Block Level Button</button>
  ```

h4 Button group

.example
  .btn-group
    button.btn.btn-success.btn-ghost Left
    button.btn.btn-success.btn-ghost Middle
    button.btn.btn-success.btn-ghost Right

:marked
  ```html
  <div class="btn-group">
    <button class="btn btn-success btn-ghost">Left</button>
    <button class="btn btn-success btn-ghost">Middle</button>
    <button class="btn btn-success btn-ghost">Right</button>
  </div>
  ```

h4 Card

.grid
  .cell.-4of12
    .card
      header.card-header title
      .card-body
        .inner Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.

:marked
  ```html
  <div class="card">
    <header class="card-header">title</header>
    <div class="card-content">
      <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, quas ex vero enim in doloribus officiis ullam vel nam esse sapiente velit incidunt. Eaque quod et, aut maiores excepturi sint.</div>
    </div>
  </div>
  ```

h4 Alerts

.example
  .alert.alert-success Success message
  .alert.alert-info Info message
  .alert.alert-warning Warning message
  .alert.alert-error Error message

:marked
  ```html
  <div class="alert alert-success">Success message</div>
  <div class="alert alert-info">Info message</div>
  <div class="alert alert-warning">Warning message</div>
  <div class="alert alert-error">Error message</div>
  ```

h4 Menu

.example
  .grid
    .cell.-3of12
      .menu
        a.menu-item
          | item #1
          .pull-right &#xbb;
        a.menu-item.active
          | item #2
          .pull-right &#xbb;
        a.menu-item
          | item #3
          .pull-right &#xbb;

:marked
 ```html
  <div class="menu">
    <a class="menu-item">
      item #1 <div class="pull-right">»</div>
    </a>
    <a class="menu-item active">
      item #2 <div class="pull-right">»</div>
    </a>
    <a class="menu-item">
      item #3 <div class="pull-right">»</div>
    </a>
  </div>
  ```

h4 Media

p This is useful if you intend to display a list of items, like the Twitter timeline.

.example
  .media
    .media-left
      .avatarholder e
    .media-body
      .media-heading EGOIST @egoist
      .media-content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
.media
  .media-body
    .media-heading EGOIST @egoist
    .media-content Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.
  .media-right
    .avatarholder e

:marked
  ```html
  <!-- left align -->
  <div class="media">
    <div class="media-left">
      <div class="avatarholder">e</div>
    </div>
    <div class="media-body">
      <div class="media-heading">EGOIST @egoist</div>
      <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
    </div>
  </div>

  <!-- right align -->
  <div class="media">
    <div class="media-body">
      <div class="media-heading">EGOIST @egoist</div>
      <div class="media-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga vel, voluptates, doloremque nesciunt illum est corrupti nostrum expedita adipisci dicta vitae? Eveniet maxime quibusdam modi molestias alias et incidunt est.</div>
    </div>
    <div class="media-right">
      <div class="avatarholder">e</div>
    </div>
  </div>
  ```

h4  Loading

p hack.css gives you a default loading element, but you can find more at <a href="https://www.pexels.com/blog/css-only-loaders/">CSS-only loaders</a>.

.example
  .loading

.example
  button.btn.btn-info.btn-ghost
    | Loading&hellip;
    span.loading

.example
  .alert.alert-info
    span.loading
    | Loading in an alert box&hellip;

:marked
  ```html
  <div class="loading"></div>

  <button class="btn btn-info btn-ghost">
    Loading&hellip;
    <span class="loading"></span>
  </button>

  <div class="alert alert-info">
    <span class="loading"></span>
    Loading in an alert box&hellip;
  </div>
  ```

